/*
 * @Description: 全宗弹窗组件
 * @Author: Rfan
 * @Date: 2022-01-07 14:54:11
 * @LastEditTime: 2022-09-17 18:02:30
 */

import { useState } from 'react';
import { Button, Checkbox, Divider, Form, Input, Modal, Select, Space } from 'antd';
import classNames from 'classnames/bind';
import { useFondContext } from '../../contexts/FondContext';
import type { FC } from 'react';
import type { ICommonDialog } from '@/interfaces/global';
import styles from '../../styles/addDialog.module.scss';
import { IFond } from '@/interfaces/fond';

const cx = classNames.bind(styles);
const { Option } = Select;

interface AddDialogProps extends ICommonDialog {}

const AddDialog: FC<AddDialogProps> = (props) => {
  const { visible, onClose } = props;
  const { list, selectUnit, onAddFond } = useFondContext();
  const [form] = Form.useForm();

  const initDisable = true;

  // 使用系统分配全宗号
  const [autoFondNo, setAutoFondNo] = useState(false);

  const submitFunc = () => {
    form.submit();
  };

  const onFinish = (values: any) => {
    values.unitId = selectUnit.id;
    onAddFond(values).then(() => {
      onCancel();
    });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const onCancel = () => {
    onClose();
  };

  return (
    <Modal
      destroyOnClose
      title="新建全宗"
      visible={visible}
      width={800}
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={submitFunc}>
          保存
        </Button>
      ]}
    >
      <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        preserve={false}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="全宗名称"
          extra="注意：全宗名称不能重复"
          name="fondName"
          rules={[{ required: true, message: '请输入全宗名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="全宗号"
          name="fondCode"
          extra="全宗号必填，且不可重复"
          required={!autoFondNo}
        >
          {/* TODO: 恢复系统分配复选框后 删除外层 name 属性 */}
          {/* <Space>
            <Form.Item
              name="fondCode"
              rules={[{ required: !autoFondNo, message: '请输入全宗号' }]}
              noStyle
            > */}
          <Input disabled={autoFondNo} />
          {/* </Form.Item>
            <Checkbox
              checked={autoFondNo}
              onChange={(evt) => {
                setAutoFondNo(evt.target.checked);
              }}
            >
              使用系统分配
            </Checkbox>
           </Space> */}
        </Form.Item>
        <Form.Item name="remark" label="全宗备注">
          <Input.TextArea placeholder="备注信息描述，最多可填写2000字" maxLength={2000} showCount />
        </Form.Item>
        <Form.Item wrapperCol={{ span: 24 }}>
          <Divider />
        </Form.Item>
        <Form.Item label="初始化" wrapperCol={{ span: 18 }}>
          <Form.Item noStyle>
            <Space>
              <Checkbox>启用复制</Checkbox>
              <Select size="small" disabled={initDisable} value={list[0]?.id}>
                {list.map((fond: IFond) => (
                  <Option value={fond.id}>{fond.fondName}</Option>
                ))}
              </Select>
              <span>的配置作为初始化配置</span>
            </Space>
          </Form.Item>
          <Form.Item noStyle>
            <div className={cx('copy-wrap')}>
              <div className={cx('copy-item')}>
                <h6>1. 复制核心业务(默认)：</h6>
                <Checkbox.Group disabled={initDisable}>
                  <Checkbox value={1}>库类型表</Checkbox>
                  <Checkbox value={2}>表单设计</Checkbox>
                  <Checkbox value={3}>分类表</Checkbox>
                  <Checkbox value={4}>排序设置</Checkbox>
                  <Checkbox value={5}>档号设置</Checkbox>
                  <Checkbox value={6}>自增字段</Checkbox>
                  <Checkbox value={7}>卷盒设置</Checkbox>
                </Checkbox.Group>
              </div>
              <div className={cx('copy-item')}>
                <h6>2. 复制权限控制业务：</h6>
                <Checkbox.Group disabled={initDisable}>
                  <Checkbox value={1}>默认数据权限</Checkbox>
                  <Checkbox value={2}>规则权限</Checkbox>
                </Checkbox.Group>
              </div>
              <div className={cx('copy-item')}>
                <h6>3. 复制其它：</h6>
                <Checkbox.Group disabled={initDisable}>
                  <Checkbox value={1}>报表</Checkbox>
                  <Checkbox value={2}>流程</Checkbox>
                </Checkbox.Group>
              </div>
            </div>
          </Form.Item>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddDialog;
